<template>
    <app-dialog-form
      :title="props.ruleId ? '编辑规则' : '添加规则'"
      :confirm="handleSubmit"
      width="60%"
      append-to-body
      @closed="handleDialogClosed"
      @open="handleDialogOpen"
    >
      <el-form
        label-width="110px"
        v-loading="formLoading"
        :model="formData"
        :rules="formRules"
        ref="form"
        :validate-on-rule-change="false"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="类型">
              <el-radio-group v-model="formData.auth_type">
                <el-radio :label="2">
                  接口
                </el-radio>
                <el-radio :label="1">
                  菜单（只显示三级）
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="名称"
              prop="menu_name"
            >
              <el-input v-model="formData.menu_name" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="父级分类"
              prop="path"
            >
              <el-cascader
                v-model="formData.path"
                :options="menus"
                clearable
                :props="{ checkStrictly: true }"
                @change="handleChange"
              />
            </el-form-item>
          </el-col>
          <template v-if="formData.auth_type === 2">
            <el-col :span="12">
              <el-form-item
                label="请求方式"
                prop="methods"
              >
                <el-select v-model="formData.methods">
                  <el-option
                    v-for="item in methods"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="接口地址"
                prop="api_url"
              >
                <el-input v-model="formData.api_url" />
              </el-form-item>
            </el-col>
          </template>
          <template v-else>
            <el-col :span="12">
              <el-form-item
                label="接口参数"
                prop="params"
              >
                <el-input v-model="formData.params" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="路由路径"
                prop="menu_path"
              >
                <el-input v-model="formData.menu_path" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="图标"
                prop="icon"
              >
                <el-input v-model="formData.icon" />
              </el-form-item>
            </el-col>
          </template>
          <el-col :span="12">
            <el-form-item
              label="权限标识"
              prop="unique_auth"
            >
              <el-input v-model="formData.unique_auth" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="排序"
              prop="sort"
            >
              <el-input v-model.number="formData.sort" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="状态"
              prop="is_show"
            >
              <el-radio-group v-model="formData.is_show">
                <el-radio :label="0">
                  关闭
                </el-radio>
                <el-radio :label="1">
                  开启
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="是否展示"
              prop="is_show_path"
            >
              <el-radio-group v-model="formData.is_show_path">
                <el-radio :label="0">
                  否
                </el-radio>
                <el-radio :label="1">
                  是
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </app-dialog-form>
  </template>
<script lang='ts' setup>
import { computed, ref } from 'vue'
import * as menuApi from '@/api/menu'
import { ElMessage } from 'element-plus';
import type { Menu } from '@/api/types/menu'
import type { PropType } from 'vue'
import type { IElForm } from '@/types/element-plus'

const props = defineProps({
    ruleId: {
        type: Number as PropType<number | null>,
        default: null,
    },
    pid: {
        type: Number as PropType<number | null>,
        default: null,
    }
})

const emit = defineEmits(['success', 'update:rule-id', 'update:pid'])

const form = ref<IElForm | null>(null)
const formData = ref<{path: number[]} & Omit<Menu, 'children' | 'is_del' | 'path'>>({
    auth_type: 1,
    menu_name: '',
    pid: 0,
    params: '',
    controller: '',
    module: '',
    action: '',
    icon: '',
    path: [],
    menu_path: '',
    api_url: '',
    methods: '',
    unique_auth: '',
    header: '',
    is_header: 0,
    sort: 0,
    access: 0,
    is_show: 0,
    is_show_path: 1
})

const menuRules = {
  menu_path: [
    { message: '请输入路由路径', required: true, trigger: 'change' }
  ],
  unique_auth: [
    { message: '请输入权限标识', required: true, trigger: 'change' }
  ]
}

const apiRules = {
  methods: [
    { message: '请选择请求方式', required: true, trigger: 'change' }
  ],
  api_url: [
    { message: '请输入接口地址', required: true, trigger: 'change' }
  ]
}

const commonRules = {
  menu_name: [
    { message: '请输入按钮名称', required: true, trigger: 'change' }
  ]
}

const formRules = computed(() => {
  // 清除验证结果
  form.value?.clearValidate()
  return formData.value.auth_type === 1
    ? { ...menuRules, ...commonRules }
    : { ...apiRules, ...commonRules }
})

const menus = ref<Menu[]>([])
const methods = ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'].map(x => {
    return {
        value: x,
        label: x
    }
})

const formLoading = ref(false)

const handleDialogOpen = async () => {
    formLoading.value = true
    await Promise.all([
      loadMenus(),
      loadMenu(),
      setDefaultMenuPath(),
    ]).finally(() => {
      formLoading.value = false
    })
}

const loadMenus = async () => {
  const data = await menuApi.getMenuTree()
  menus.value = data
}

const setDefaultMenuPath = async () => {
  if (props.pid) {
    const menu = await menuApi.getMenu(props.pid)
    formData.value.pid = props.pid
    formData.value.path = [...menu.path, props.pid]
  }
}

const loadMenu = async () => {
  if (!props.ruleId) {
    return
  }
  const data = await menuApi.getMenu(props.ruleId)
  data.path = [
    ...data.path,
    data.id
  ]
  formData.value = data
}

const handleChange = (value: any) => {
  formData.value.pid = value[value.path - 1]
}

const handleSubmit = async () => {
  const valid = await form.value?.validate()
  if(!valid) return

  if(props.ruleId) {
    await menuApi.updateMenu(props.ruleId, formData.value)
  }else {
    await menuApi.createMenu(formData.value)
  }

  ElMessage.success('保存成功')
  emit('success')
}

const handleDialogClosed = () => {
  emit('update:rule-id', null)
  emit('update:pid', null)
  form.value?.clearValidate() // 清除验证的结果
  formData.value?.resetFields() // 清除表单数据
}
























</script>
<style lang='scss' scoped>

</style>